<style lang='scss' scoped>
.dashborad {
  .dashborad-item {
    color: #fff;
    font-size: 24px;
    float: left;
    width: 50%;
    background-color: #2d8cf0;
    padding: 30px 0;
    margin-bottom: 20px;
    header {
      font-size: 50px;
      line-height: 2;
    }
  }
}
</style>


<template>
    <section class="dashborad">
        <Breadcrumb class="bread-title">
            <BreadcrumbItem>我的账户</BreadcrumbItem>
        </Breadcrumb>
        <article class="clearfix text-center">
            <div class="dashborad-item">
                可用余额
                <header>{{data.availableAmount|tofixed}} USD</header>
            </div>
            <div class="dashborad-item">
                冻结金额
                <header>{{data.freezeTotalAmount|tofixed}} USD</header>
            </div>
            <div class="dashborad-item" style="background-color:#fc8627;margin-right: 8%;width: 46%;">
                本月总收入
                <header>{{data.totalRevenue|tofixed}} USD</header>
            </div>
            <div class="dashborad-item" style="background-color:#32cc7f;width: 46%;">
                本月总支出
                <header>{{data.totalExpenses|tofixed}} USD</header>
            </div>
        </article>
    
    </section>
</template>

<script>
import { HttpAccountOverview } from "@/service/api/views";
export default {

    data() {
        return {
            data: {},

        };
    },
    created() {
        this.getOverview();
    },
    filters:{
        tofixed(val){
            return parseFloat(val||0).toFixed(2);
        }
    },

    methods: {
        async getOverview() {
            HttpAccountOverview().then(res => {
                this.data = res.data;
            }, err => {

            })
        },
    },
};
</script>



